<template>
	<z-paging
		ref="paging"
		v-model="dataList"
		@query="query"
		:paging-style="{
			'background-color': '#F7F7F7'
		}"
	>
		<view slot="top">
			<view class="topFixed">
				<view>
					<u-text
						text="产品信息"
						size="28rpx"
						bold
						color="#FFF"
					/>
				</view>
				<view
					class="topFixed_productMessage"
					@click="goodsDetail()"
				>
					<u-image
						width="112rpx"
						height="112rpx"
						radius="8rpx"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/22/380582008a1a43158f0b89ebb8d7569f.png"
					/>
					<view class="topFixed_productMessage_right">
						<view style="display: flex; justify-content: space-between">
							<u-text
								color="#FFF"
								:iconStyle="{ color: '#FFF', fontSize: '24rpx' }"
								:text="productDetail.productName || productDetail.goodsName"
								lines="1"
							/>
							<u-icon
								name="arrow-right"
								size="24rpx"
								color="#FFFFFF"
							/>
						</view>

						<u-text
							:text="`已使用:${productDetail.useNumber || productDetail.usedCount}  待使用:${(productDetail.number - productDetail.useNumber) || (productDetail.total - productDetail.usedCount)}`"
							color="#FFF"
							size="24rpx"
						/>
					</view>
				</view>
			</view>
			<view style="padding: 32rpx 0 0 32rpx; box-sizing: border-box">
				<u-text
					text="使用记录"
					size="32rpx"
					color="#3d3d3d"
				/>
			</view>
		</view>
		<view class="list">
			<view
				class="list_item"
				v-for="item in dataList"
				:key="item.id"
			>
				<view>
					<u-text
						prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/22/20c1d30ce68446aa93cea124eb82b269.png"
						size="28rpx"
						:text="item.usageTime"
						:iconStyle="{ width: '48rpx', height: '48rpx', marginRight: '20rpx' }"
					/>
				</view>
				<view>
					<u-text
						:text="item.type == '1' ? ('新增：'+item.number+'次') : ('已使用：'+item.number+'次')"
						color="#4785FF"
						size="24rpx"
					/>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { getProductMessage, getProductDetail } from "@/api/health_service.js"
	import { orderGoodsUsage } from "@/api/order.js"

	export default {
		data() {
			return {
				dataList: [],
				id: "",
				productDetail: {},
				productId: ""
			}
		},
		onLoad(options) {
			this.id = options.id || ''
			if(this.id){
				getProductDetail(this.id).then((res) => {
					console.log(res)
					this.productDetail = res
				})
			}else{
				 this.productDetail = options?.data && JSON.parse(options?.data);
				 this.productId =  this.productDetail.goodsId
				 console.log(this.productDetail)
			}
			
		},
		methods: {
			goodsDetail(){
				uni.navigateTo({
					url:`/pages_shop1/goods/index?id=${this.productDetail.id}`
				})
			},
			async query(pageNum, pageSize) {
				const params = {
					pageNum,
					pageSize,
					orderProductId: this.id,
					productId: this.productId
				}
				const result =this.id ? await getProductMessage(params) : await orderGoodsUsage(params)
				this.id ? this.$refs.paging.complete(result.rows) : this.$refs.paging.complete(result.data.rows) //0：使用 1增加
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topFixed {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 236rpx;
		background-color: #4785ff;
		padding: 32rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		justify-content: space-between;

		&_productMessage {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_right {
				width: 550rpx;
				display: flex;
				flex-direction: column;
				height: 112rpx;
				justify-content: space-between;
			}
		}
	}

	.list {
		padding: 32rpx;
		box-sizing: border-box;

		&_item {
			width: 100%;
			height: 90rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
			background: #fff;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			box-sizing: border-box;
		}
	}
</style>
